<template>
  <a-modal
    :title="`总产出`"
    :width="640"
    :visible="visible"
    :confirmLoading="loading"
    :footer="false"
    @cancel="
      () => {
        $emit('cancel')
      }
    "
  >
    <a-spin :spinning="loading">
      <a-table
        row-key="index"
        size="small"
        :columns="columns"
        :dataSource="list"
        :pagination="false"
        :rowKey="(lists) => lists.detailId"
      >
        <template #expandedRowRender="record">
          <span scope="record" v-if="record.proTaskNumInfoList.length">
            <a-table 
                :rowKey="(lists) => lists.projectId" 
                :dataSource="record.proTaskNumInfoList" 
                :columns="d_columns" 
                :pagination="false"
            >
              
            </a-table>
          </span>
        </template>
      </a-table>
    </a-spin>
  </a-modal>
</template>

<script>
import { studioOutputSumListStatistics } from '@/api/system'

const columns = [
  {
    title: '工作室名称',
    dataIndex: 'detailName',
  },
  {
    title: '产出金额',
    dataIndex: 'outputPrice',
  },
]
const d_columns = [
    {
    title: '项目名称',
    dataIndex: 'projectName',
  },
  {
    title: '完成时长',
    dataIndex: 'finishTimeLength',
  },
  {
    title: '单价',
    dataIndex: 'uniPrice',
  },
  {
    title: '金额',
    dataIndex: 'outputPrice',
  },
]

export default {
    
  props: {
    visible: {
      type: Boolean,
      required: true,
    },
  },
  data() {
      this.columns = columns
    this.d_columns = d_columns
    return {
        list: [],
        loading: false,
        init: true,
    }
  },
  created() {},
  methods: {
      getAnsislay(){
          this.loading = true
          studioOutputSumListStatistics().then(res=>{
              console.log(res.data)
              this.list = res.data
          }).finally(()=>this.loading = false)
      }
  },
  watch: {
      visible: function(n){
          if(n && this.init){
              this.getAnsislay()
              this.init = false
          }
      }
  }
}
</script>
